<template>
  
    <el-row class="layout"> 
        <div style="width:100%;margin:auto">
            <div style="height:300px;margin-top:5px;">
                <el-card shadow="hover" style="width:30%;height:300px;float:left">
                    <span class="xxx">订单号：103852280367</span>
                    <br><br><br><br><br><br>
                    <span class="yyy">完成</span>
                    <br><br><br><br><br>
                    <el-button style="margin-left:35%" @click="go">查看商品详情</el-button>
                </el-card>
                <el-card shadow="hover" style="width:69%;height:300px;float:left">
                    <div style="font-size:13px;margin-left:20%;margin-top:2%">
                        订单已经完成，感谢您在京东商城购物，欢迎您对本次交易及所购商品进行评价。
                    </div>
                    <div style="width:70%;margin-left:15%;margin-top:10%">
                        <el-steps :active="5">
                             <el-step title="提交订单" icon="el-icon-sold-out"></el-step>
                             <el-step title="付款成功" icon="el-icon-bank-card"></el-step>
                             <el-step title="商品出库" icon="el-icon-box"></el-step>
                             <el-step title="等待收货" icon="el-icon-truck"></el-step>
                             <el-step title="完成" icon="el-icon-success"></el-step>
                        </el-steps>
                    </div>
                </el-card>
            </div>
        </div>
        <div style="margin-top:3%">
            <el-card shadow="hover" style="width:33.1%;height:250px;float:left" header="收货人信息">
             <div class="aa">收货人：螺旋的科沦</div>
             <br>
             <div class="aa">地址：福建龙岩市新罗区城区闽大路八号闽西职业技术学院南校区菜鸟驿站代收</div>
             <br>
             <div class="aa">手机号码：130****2011</div>
            </el-card>
            <el-card shadow="hover" style="width:33.1%;height:250px;float:left" header="配送信息">
                <div class="aa">配送方式： 京东快递</div>
                <br>
                <div class="aa">期望送货日期： 2019-09-28</div>
                <br>
                <div class="aa">期望配送时间： 09:00-21:00</div>
            </el-card>
            <el-card shadow="hover" style="width:33.1%;height:250px;float:left" header="付款信息">
                <div class="aa">付款方式： 在线支付</div>
                <br>
                <div class="aa">付款时间： 2019-09-27 16:59:52</div>
            </el-card>
        </div>
        <div style="margin-top:3%" >
                <el-table
      :data="tableData"
      style="width: 100% 4;margin-top:3%">
      <el-table-column
        prop="img"
        label="商品图片"
        width="180">
        <template v-slot="scope">
              <img :src="scope.row.img" alt="" width="90" height="90" />
            </template>
        </el-table-column>
      <el-table-column
        prop="commodity"
        label="商品"
        width="250">
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="num"
        label="商品数量">
      </el-table-column>
      <el-table-column
        prop="money"
        label="金额">
      </el-table-column>
    </el-table>
        </div>
    </el-row>

</template>

<script>
export default {
    data() {
        return {
          tableData: [{
            img:require('../assets/10.jpg'),
            commodity:'Apple iPhone 12 (A2404) 128GB 黑色 支持移动联通电信5G 双卡双待手机',
            id:'103852280367',
            num:'1',
            money:'5499',
          }]
        }
    },
    methods:{
        go(){
         this.$router.push("/details");
        }
    }
};
</script>

<style>
.layout {
  width: 65%;
  margin: auto;
  min-height: calc(100vh - 120px);
}
.el-card__body{
    padding: 0px 0px 0px 0px;
  }
.xxx{
    margin-left: 35%;
    font-size: 13px;
    margin-top: 20px;
}
.yyy{
    
    color: rgb(128, 201, 18);
    font-size: 25px;
    margin-left: 44%;
}
ul{
    font-size: 15px;
}
.aa{
    font-size: 13px;
}
</style>